<template>
  <div class="main">
    <div class="title">
      <h3>{{$t("message.global.Community")}}</h3>
      
    </div>
    <div class="content">
    	{{$t("message.global.building")}}<br /> {{$t("message.global.Leveland")}}
    </div>
     <div class="title">
      <h3>{{$t("message.global.Communityto")}}</h3>
      
    </div>
    <div class="content">
    	{{$t("message.global.atpresent")}}

    </div>
     <div class="title">
      <h3>{{$t("message.global.Communityincome")}} </h3>
      
    </div>
    <div class="content">
    	{{$t("message.global.Uptosilver")}}
    	<br />
    	{{$t("message.global.Eachclub")}}
    	

    </div>
   
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      title: '',
      updatedAt: '',
      content: '',
      type: '',
      source: '',
      publishingRule: '',
      numbers: '',
      author: ''
    };
  },
  created() {},
  // 钩子函数异步请求接口时调取在钩子函数mouted中执行
  mounted() {  

  },
  methods: {}
};
</script>
<style lang="scss" scoped>
.main {
  width:672px;
  margin: 0 auto;
  .banner {
    width: 100%;
    img {
      width: 100%;
    }
  }
  .title {
    .numbers {
      display: inline-block;
      width: 28px;
      height: 25px;
      background: url(../assets/numbers.png) no-repeat 0 0;
      background-size: 100% 100%;
    }
    font-family: -apple-system-font,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei",Arial,sans-serif;
    margin: 40px 0px 15px 0px;
    h3 {
      margin: 0;   
     color: #585867;
      font-size: 30px;
      font-weight: 700;
    }
    
    p {
      font-size: 30px;
      margin: 12px 0;
      color: #a6a6a6;
      span {
        margin-right: 30px;
         b {
          position: relative;
          top: 2px;
          margin-right: 10px;
         }
      }
    }
  }
  .content {
    color: rgba(102, 102, 102, 1);
    font-size: 28px;
    line-height: 50px;

  }
  .source {
    font-size: 30px;
    color: #585867;
    .banquan {
      padding: 5px 0;
    }
    span {
      display: block;  
    }
  }
  .video {
    video {
      margin:0 auto;
      display: block;
    }
  }
  .footer {
    display: flex;
   
    align-items: center;
    margin: 0 auto;
    width: 672px;
    height: 228px;
    /*background: url(../assets/border.png) no-repeat 0 0;*/
    
    .text {
      color: #585867;
      position: relative;
      bottom: 10px;
      left: 30px;
     
      font-family: -apple-system-font,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei",Arial,sans-serif;
      h1 {
        font-size: 32px;
      }
      span{
    	font-size: 30px;
    	color: #585867;
    	padding-bottom: 21px;
    	margin-top: 32px;
    	display: inline-block;
    }
      p {
        margin: 0;
        padding: 0;
        font-size: 28px;
      }
    }
    .qr {
     
      right: 0px;
      top: 10px;
      .qrimg {
        display: block;
        width: 140px;
        height: 140px;
        background: url(../assets/qr.png) no-repeat 0 0;
        background-size: 100% 100%;
      }
      span{
      	color: #333333;
      	font-size: 26px;
      }
    }
  }
}
</style>